<template>
  <div>
    <!--sticky && header-->
    <sticky>
      <x-header :left-options="{backText: ''}">我的位置</x-header>
    </sticky>
    <group label-width="2em" label-margin-right="2em" label-align="justify">
      <cell title="区域" value-align="left" value="请选择所在位置"></cell>

      <checker v-model="area" default-item-class="area-item" selected-item-class="area-item-selected">
        <checker-item :value="item" v-for="(item, index) in items" :key="index">{{item.value}}</checker-item>
      </checker>

      <x-button class="submit-btn">提交</x-button>
    </group>
  </div>

</template>

<script>
  import {
    XHeader,
    Sticky,
    Checker,
    CheckerItem,
    GroupTitle,
    Group,
    Cell,
    XInput,
    CellFormPreview,
    XButton
  } from 'vux'

  export default {
    components: {
      XHeader,
      Sticky,
      Checker,
      CheckerItem,
      GroupTitle,
      Group,
      Cell,
      XInput,
      CellFormPreview,
      XButton
    },
    data() {
      return {
        items: [{
          key: '1',
          value: '一号楼'
        }, {
          key: '2',
          value: '二号楼'
        }, {
          key: '3',
          value: '三号楼'
        }, {
          key: '4',
          value: '四号楼'
        }]
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/theme.css';
  @import '~vux/src/styles/weui/widget/weui-uploader/index.less';

  .area-item {
    border: 1px solid #ececec;
    border-radius: 1em;
    padding: 0 1.5em;
    margin: .5em 0 .5em 1em;
  }

  .area-item-selected {
    background: #3987df;
    color: #fff;
  }

  .submit-btn {
    width: 30%;
    border-radius: 99px;
    background-color: #3987df;
    color: #fff;
    margin-bottom: 1em;
  }
</style>
